<template>
	<view class="all1">
		<view class="input">
			<view style="display: flex; align-items: center;margin-bottom: 30rpx;">
<!--				<view class="">搜索内容：</view>-->
				<input type="text" v-model="searchContent"
					style="border:1px solid #ccc;font-size:smaller;border-radius:10rpx;width: 79%;" @input="inputFun2">
<!--				<u-search placeholder="请输入搜索内容" v-model="keyword" @change="changkeyword" @search="onConfirm"-->
<!--					:showAction="false" bgColor="#fff"></u-search>-->
				<u-button icon="reload" text="刷新"
					style="width: 120rpx;height: 68rpx; border-radius: 68rpx; margin-left: 10rpx;"
					@click="presa"></u-button>
			</view>
			<div v-for="(item,index) in optionsData" @click="getOptionInfo(item,item.seller)" v-show="isshow"
				style="border:1px solid #ccc;ine-height:30px;cursor: pointer;border-radius:10rpx">
				{{item.createTime }}&nbsp&nbsp{{item.seller}}&nbsp{{item.amount}}&nbsp{{item.isPay}}
			</div>
			<!-- <view style="display: flex;margin: 30rpx -150rpx;">
				<u-button type="primary" icon="plus" text="批量添加" style="width: 200rpx;" @click="insert"></u-button>

			</view> -->
			<uni-drawer ref="showLeft" mode="left" :width="320">
				<view class="close">
					<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭</text></button>
					<view class="formlist">
						<u-form :model="fromupdate" :rules="rules" ref="uForm" label-width="80" labelAlign="left">
							<u-form-item prop="traner" borderBottom ref="item1">
								<view class="lable">卖家</view>
								<u--input v-model="fromupdate.seller" border="none" placeholder="请填写卖家"></u--input>
							</u-form-item>
							<u-form-item prop="paymentMethod" borderBottom ref="item1">
								<view class="lable">金额</view>
								<u--input v-model="fromupdate.amount" border="none" placeholder="请填写金额"></u--input>
							</u-form-item>
							<u-form-item prop="paymentMethod" borderBottom ref="item1">
								<view class="lable">支付方式</view>
								<u--input v-model="fromupdate.paymentMethod" border="none"
									placeholder="请填写支付方式"></u--input>
							</u-form-item>
							<u-form-item prop="paymentMethod" borderBottom ref="item1">
								<view class="lable">是否支付</view>
								<u--input v-model="fromupdate.isPay" border="none" placeholder="请填写是否支付"></u--input>
							</u-form-item>
							<view class="uni-btn-v" @click="submit">确认修改</view>
						</u-form>
					</view>
				</view>
			</uni-drawer>
			<view class="uni-container">
				<view class="list" v-for="(item,index) in tableData" :key="index" @click="infor(item)">
					<view class="l-i">
						<span class="spanli">
							<view class="li"></view>
							<view>卖家</view>
						</span>：<span style="font-weight: bold;">{{item.seller}}</span>
					</view>
					<view class="l-i"><span class="spanli">
							<view class="li"></view>
							<view>金额</view>
						</span>：<span style="color:#F9363A;font-weight: bold;">{{item.amount}}</span>元</view>
					<view style="display: flex; justify-content: space-between;">
						<view class="l-i"><span class="spanli">
								<view class="li"></view>
								<view>日期</view>
							</span>：{{item.createTime}}</view>
					</view>
					<view class="l-i"><span class="spanli">
							<view class="li"></view>
							<view>是否支付</view>
						</span>：{{item.isPay}}</view>
				</view>
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
						@change="change" />
				</view>
			</view>
		</view>
		<view class="btn">
			<u-button type="primary" icon="plus" text="批量添加" style="width: 90%;
				margin-top: 20rpx;
				border-radius: 80rpx;
				background-color: red;
				border: none;
			}" @click="insert"></u-button>
		</view>
	</view>
</template>


<script>
	import {
		Stockqueryall,
		Stocklikeall,
		Stockupdate,
		Stockdelete
	} from '@/common/api.js'
	export default {
		data() {
			return {
				keyword: '',
				isshow: false,
				searchContent: "",
				optionsData: [],
				options2: [],
				options3: [],
				orstate: '1',
				value: '',
				//抽屉
				showLeft: false,
				searchVal: '',
				fromData: {
					companyId: ''
				},
				from: {
					companyId: "",
					like: ""
				},
				fromAddall: [],
				fromupdate: {},
				fromAdd: {
					traner: "", //卖家
					model: "", //类型
					number: "", //数量
					unitPrice: "", //单价
					paymentMethod: "", //支付方式
					orstate: "", //添加类型//1为进货2为销货
					isPay: "", //是否支付
					companyId: "" //所属公司
				},
				itemlist: [],
				tableData: '',
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
			onConfirm() {
				console.log(111);
			},
			//监听输入框
			changkeyword(e) {
				console.log(e);
			},
			inputFun2() {
				this.isshow = true
			},
			getOptionInfo(val, searchName) {
				this.isshow = false
				this.searchContent = searchName
				this.options3[0] = val;
				this.tableData = this.options3;
			},
			presa() {
				this.getData()
			},
			onQuery() {
				console.log(this.value);
				this.from.companyId = uni.getStorageSync('companyId');
				this.from.like = this.searchContent;
				// this.from.like = this.value;
				uni.showLoading({
					title: '加载中...',
				});
				Stocklikeall(this.from).then((res) => {
					uni.hideLoading();
					console.log('---------------------');
					console.log(res);
					this.tableData = res.data
				})
			},
			submit() {
				this.fromupdate.companyId = uni.getStorageSync('companyId');
				// this.fromAdd.orstate = '1';
				// this.fromAddall.push(this.fromAdd);
				// Stockadd(this.fromAddall).then((res) => {
				// 	this.getData()
				// })
				uni.showLoading({
					title: '加载中...',
				});
				Stockupdate(this.fromupdate).then((res) => {
					uni.hideLoading();
					this.getData()
				})
			},
			infor(item) {
				console.log('详情');
				uni.navigateTo({
					url: '/pages/Functions/information?orstate=1&id=' + item.id
				})
				// let from = {}
				// from.companyId = uni.getStorageSync('companyId');
				// from.id = item.id;
				// from.orstate = '1';//1为进货详情2为销货详情
				// Stockinfor(from).then((res) => {
				//   this.getData()
				// })
			},
			// upadte(item) {
			// 	console.log('修改');
			//   Stockupdate(this.fromAddall).then((res) => {
			//     this.getData()
			//   })
			// },
			deleteOne(item) {
				console.log('删除');
				console.log(item);
				this.itemlist[0] = item.id;
				let from = {}
				from.idList = this.itemlist;
				from.traner = item.seller;
				from.companyId = item.companyId;
				uni.showLoading({
					title: '加载中...',
				});
				Stockdelete(from).then((res) => {
					uni.hideLoading();
					this.getData()
				})
			},
			insert() {
				uni.navigateTo({
					url: '/pages/Functions/insert?orstate=1'
				})
			},
			confirm() {},
			// 打开窗口
			showDrawer(item, e) {
				this.$refs[e].open()
				this.fromupdate = item;
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			// change(e, type) {
			// 	console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
			// 	this[type] = e
			// },
			// //输入搜索内容
			// change(e) {
			// 	console.log('change', e);
			// },
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据
			getData() {
				this.loading = true
				this.fromData.companyId = uni.getStorageSync('companyId');
				console.log(this.fromData);
				uni.showLoading({
					title: '加载中...',
				});
				Stockqueryall(this.fromData).then((res) => {
					uni.hideLoading();
					console.log(res.data);
					this.loading = false;
					this.tableData = res.data
					this.options2 = res.data
				})
			},

		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		},
		watch: {
			searchContent() {
				var ipt_content = this.searchContent
				if (ipt_content) {
					var item = this.options2.filter(ele => {
						console.log(ele)
						console.log(ele.seller)
						if (ele.model.match(ipt_content) || ele.isPay.match(ipt_content) || ele.amount.match(
								ipt_content) || ele.seller.match(ipt_content) || ele.createTime.match(
								ipt_content)) {
							// console.log(ele.text.match(ipt_content))
							return ele;
						}
					})
					this.optionsData = item
				}
				console.log(this.optionsData)
			}
		}
	}
</script>


<style>
	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */
	.uni-group {
		display: flex;
		align-items: center;
	}

	.input {
		padding: 30rpx;
	}

	.formlist {
		/* margin: 420rpx 30rpx 0 30rpx; */
		/* background-color: white; */
		padding: 30rpx;
		border-radius: 30rpx;
	}

	.lable {
		font-size: 30rpx;
		font-weight: bold;
	}

	.uni-btn-v {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #24d4b0;
		color: #fff;
		font-size: 35rpx;
		font-weight: bold;
		border-radius: 30rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.all1 {
		width: 750rpx;
		background-color: #F5F4F4;
		height: 100vh;
		overflow: auto;
	}

	.list {
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 20rpx;
		background-color: white;

	}

	.spanli {
		color: #046BFB;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.l-i {
		display: flex;
		margin-bottom: 10rpx;
	}


	.li {
		width: 15rpx;
		height: 15rpx;
		border: 4rpx solid #046BFB;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.dajianshi {
		margin: 5px auto 0;
		border: 1px solid #369;
		background-color: cde;
		padding: 20px;
	}

	.btn {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
		height: 140rpx;
	}
</style>
